/* static/css/beautify_json.css */

/* flask 返回 html 情况下, 需要用这些高亮设置 */
.json-key { color: #A52A2A; }
.json-index { color: #005d32; }
.json-string { color: #008000; }
.json-value { color: #0000FF; }
.json-boolean { color: #000080; }
.json-null { color: #808080; }
.json-error { color: #FF0000; }


/* 给 html 和 body 标签添加高度属性, 子容器才能继承该高度 */
body, html {
    height: 100vh;
    margin: 0;
}

/* 两端对齐 */
.container {
    height: 80%;
	display: flex; /* 弹性布局 */
	justify-content: space-between;  /* 子元素, 两端对齐 */
	align-items: center; /* 设置子元素在交叉轴（默认为垂直方向）上的对齐方式 */
}

/* Json美化两边样式 */
textarea, pre {
	width: 45%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	line-height: 1.5;
	background-color: #f8f8f8;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	overflow: auto;
}

#json_data {font-size: 14px;}
#formatted_json_new {font-size: 20px;}


/* 箭头区域 */
.arrows {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 250px; /* 三个箭头的总高度 */
	margin: 0 30px;
}

/* 箭头样式 */
.arrows span {
	font-size: 5em; /* 调大箭头大小 */
	color: #555;
	margin: 10px 10px; /* 调整箭头之间的距离 */
}

/* 自定义弹框, 顶部右侧 */
.custom-alert {
    position: fixed;  /* 元素的位置相对于浏览器窗口是固定的 */
    top: 20px;  /* 距顶部 20 px */
    right: 50px;  /* 距右边 50 px */
    background-color: #000bba;  /* 背景色 */
    color: red;  /* 文字颜色 */
    font-weighe: bold;  /* 字体加粗 */
    padding: 10px;  /* 内容与边框之间 10 px */
    border-radius: 5px;  /* 边框圆角 5px */
    display: none;  /* 默认不展示, 需要通过 Js 控制展示 */
    z-index: 1000;  /* 堆叠顺序, z-index 越高, 越显示在上方 */
}
